<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <!-- 使用表单搜索条件子组件 -->
    <SearchForm
      :searchData="pagination"
      :statusData="statusData"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="getList"
    ></SearchForm>
    <!-- 使用分页列表查询子组件 -->
    <TableList
      :data="data"
      :hover="hover"
      :total="total"
      :dataLoading="dataLoading"
      :pagination="pagination"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
      @handleClickDelete="handleClickDelete"
      @handleForbidden="handleForbidden"
    ></TableList>
    <!-- 新增或编辑弹窗表单子组件 -->
    <DialogForm
      ref="formRef"
      :title="title"
      :data="formBaseData"
      :visible="visible"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="handleEditForm"
    ></DialogForm>
    <!-- 删除弹窗子组件 -->
    <Delete
      :visible="dialogDeleteVisible"
      :deleteText="operateText"
      @handleDelete="handleDelete"
      @handleClose="handleDeleteClose"
    ></Delete>
    <!-- 禁用弹窗子组件 -->
    <Forbidden
      :visible="dialogVisible"
      :text="statusText"
      @handleClose="handleForbiddenClose"
      @handleSubmit="handleForbiddenSub"
    ></Forbidden>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next' // 引入tdesign的消息提示插件
import {
  getProjectList,
  projectAdd,
  getProjectDetails,
  projectUpdate,
  projectDelete,
  projectStatus
} from '@/api/serve' // 引入护理项目视图对象接口
import TableList from './components/TableList.vue' // 引入列表页组件
import SearchForm from './components/SearchForm.vue' // 引入搜索框组件
import DialogForm from './components/DialogForm.vue' // 引入弹窗表单子组件
import { statusData } from '@/utils/commonData' // 引入启用禁用数据对象
import Delete from '@/components/OperateDialog/index.vue' // 引入删除弹窗子组件
import Forbidden from '@/components/Forbidden/index.vue' // 引入禁用弹窗子组件

// 定义属性和方法
const data = ref([])
const total = ref(0)
const dataLoading = ref(false) // 加载中
const visible = ref(false) // 弹窗显示隐藏
const formRef = ref(null) // 弹窗表单子组件实例对象
const title = ref('') // 弹窗标题
const formBaseData = ref({}) // 弹窗表单内容(数据对象)
const hover = ref(true) // 鼠标悬停状态
const dialogDeleteVisible = ref(false) // 控制删除弹窗显示隐藏
const typeId = ref('') // 设置删除或禁用启用弹窗的护理项目的id
const operateText = ref('护理项目') // 设置要操作内容的提示文字
const dialogVisible = ref(false) // 控制禁用弹窗显示隐藏
const typeStatus = ref(null) // 设置要禁用的状态
const statusText = ref('') // 设置启用禁用的提示

// 定义分页参数
const pagination = ref({
  pageSize: 5,
  pageNum: 1
})
/* 调用接口 */
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}
/* 翻页设置当前页 */
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

/* 判断当前参数是否包含小数点 */
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true
  }
  return false
}

/* handleClear清空搜索条件 */
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name // 删除name属性
  } else {
    delete pagination.value.status // 删除status属性
  }
  // 重新查询数据
  getList()
}

// handleReset重置搜索条件
const handleReset = () => {
  pagination.value = {
    pageSize: 5,
    pageNum: 1
  }
  // delete pagination.value.name // 删除name属性
  // delete pagination.value.status // 删除status属性
  // 重新查询数据
  getList()
}

// handleClose弹窗表单显示隐藏
const handleClose = () => {
  visible.value = false
}
// handleBulid点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () => {
  title.value = '新增'
  visible.value = true
}
// handleAdd点击新增按钮 调用接口 新增数据
const handleAdd = async (val) => {
  // 调用新增接口
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('新增成功')
    getList() // 查询列表
    handleClose() // 关闭弹窗
    formRef.value.handleClear() // 调用子组件的方法，清理数据
  } else {
    MessagePlugin.error('新增失败')
  }
}

// handleEdit 编辑弹窗，回显数据
const handleEdit = (row) => {
  // 将弹出框标题设置为编辑
  title.value = '编辑'
  // 调用接口获取详情数据
  getDetails(row.id)
  // 弹出弹窗
  visible.value = true
}
// 根据id获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id)
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}

// handleEditForm 点击编辑按钮 调用接口 编辑数据
const handleEditForm = async (val) => {
  // 调用编辑接口
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList() // 刷新列表
    handleClose() // 关闭弹窗
    formRef.value.handleClear() // 调用子组件的方法，清理数据
  } else {
    MessagePlugin.error('编辑失败')
  }
}

// handleClickDelete点击删除按钮,弹出删除弹窗
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}
// handleDeleteClose 关闭删除弹窗
const handleDeleteClose = () => {
  dialogDeleteVisible.value = false
}
// handleDelete 点击确定按钮 调用接口 删除数据
const handleDelete = async () => {
  // 调用删除接口
  const res = await projectDelete(typeId.value)
  if (res.code === 200) {
    dialogDeleteVisible.value = false
    MessagePlugin.success('删除成功')
    getList() // 刷新列表
  } else {
    MessagePlugin.error('删除失败')
  }
}

// handleForbidden点击禁用按钮,弹出禁用弹窗
const handleForbidden = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub() // 调用子组件的方法，禁用数据
    statusText.value = '启用成功'
  }
}
// handleForbiddenClose 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}
// handleForbiddenSub 点击确定按钮 调用接口 禁用启用数据
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  // 调用禁用启用接口
  const res = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value)
    getList() // 刷新列表
  } else {
    MessagePlugin.error('操作失败')
  }
}
/* 生命周期函数 */
onMounted(() => {
  getList()
})
</script>
